<script setup lang="ts">
import { ElMessage } from 'element-plus';

interface FormData {
    account: string;
    password: string;
}

const formData: FormData = {
    account: '',
    password: '',
};

const formItemList: MyComment.FormItemProps<FormData>[] = [
    {
        prop: 'account',
        contentProps: { maxlength: 30, placeholder: '请输入账号' } as MyComment.FormItemContentProps['input'],
        contentExtends: { prefix: 'user' } as MyComment.FormItemContentExtends['input'],
    },
    {
        prop: 'password',
        contentProps: { maxlength: 30, placeholder: '请输入密码', type: 'password', showPassword: true } as MyComment.FormItemContentProps['input'],
        contentExtends: { prefix: 'lock' } as MyComment.FormItemContentExtends['input'],
    },
];

const formRules: MyComment.FormRules<FormData> = {
    account: { required: true, trigger: 'blur', message: '请输入账号' },
    password: { required: true, trigger: 'blur', message: '请输入密码' },
};

const router = useRouter();
const myForm = ref<MyComment.FormInstance<FormData>>();

const login = async () => {
    const validateResult = await myForm.value?.validate();
    if (validateResult) {
        const data = myForm.value?.getData();
        if (data) {
            const res = await MyService.account.login(data);
            if (res.code === 200) {
                MyModule.storage.setItem('token', res.data);
                router.push({
                    name: 'home',
                });
            } else {
                ElMessage.error({ message: res.msg });
            }
        }
    }
};

onMounted(()=>{
})
</script>

<template>
    <div class="flex full page">
        <div class="flex-col box">
            <div class="title1">您好，欢迎使用</div>
            <div class="title2">互联互通运维工作台</div>
            <MyForm ref="myForm" :form-data="formData" :form-item-list="formItemList" :form-rules="formRules" label-width="0px" size="large"></MyForm>
            <ElButton type="primary" size="large" class="button" @click="login">登录</ElButton>
        </div>
    </div>
</template>

<style scoped>
.page {
    position: relative;
    background: linear-gradient(135deg, #1ec3af, #94df58);
    justify-content: center;
    align-items: center;
}

.box {
    width: 480px;
    padding: 60px;
    border-radius: 16px;
    background-color: #ffffff;
}

.title1 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
}

.title2 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 36px;
}

.button {
    margin-top: 24px;
}
</style>
